<!DOCTYPE>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>添加</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.6.3/lib/theme-chalk/index.css">
</head>
<body>
<el-form :model="ruleForm" >
	<div id="app">
		ID: <el-input v-model="id"  :disabled="true" placeholder="${id!''}"></el-input>
		项目名称: <el-input v-model="itemName" placeholder="${itemName!''}"></el-input>
		项目金额: <el-input v-model="itemMoney" placeholder="${itemMoney!''}"></el-input>
		羡慕备注: <el-input v-model="itemRemark" placeholder="${itemRemark!''}"></el-input>
		项目注意事项: <el-input v-model="itemProgr" placeholder="${itemProgr!''}"></el-input>
		项目负责人员:  <el-input v-model="itemPayAttention" placeholder="${itemPayAttention!''}"></el-input>
		<el-button type="primary" @click="handleAduit('ruleForm')">提交</el-button>
		<el-button type="primary" @click="handleAduit('ruleForm')" >取消</el-button>
	</div>
</el-form>
</body>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    var Main = {
        data() {
            return {
                id:'',
                itemName: '',
                itemMoney: '',
                itemRemark: '',
                itemProgr: '',
                itemPayAttention: ''
            }
        },
        methods: {
            //提交添加信息
            handleAduit(ruleForm) {
                this.$http.post('/findAll/updateItem', {
                    'id': this.ruleForm.id,
                    'itemName': this.ruleForm.itemName,
                    'itemMoney': this.ruleForm.itemMoney,
                    'itemRemark': this.ruleForm.itemRemark,
                    'itemProgr': this.ruleForm.itemProgr,
                    'itemPayAttention': this.ruleForm.itemPayAttention,
                }, {
                    /*
                    * 启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。form形式传给后台，而非json形式。
                    * */
                    emulateJSON: true
                }).then(function(res) {
                    //设置
                    if(res.data.code == '0') {
                        this.$message({
                            message: "添加成功",
                            type: 'success'
                        });
                        setTimeout(function(){
                            window.location.reload()
                        },1500)
                        window.location.href='/findAll'
                    } else {
                        this.$message({
                            message: res.body.message,
                            type: 'error'
                        })
                        return;
                    }
                })
            },
        },
        //取消
        handleAduit(ruleForm){
            window.location.href='/findAll'
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</html>